<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- common -->
	<link rel="stylesheet" th:href="@{/css/common.css}">
	<!-- element-ui -->
	<link rel="stylesheet" th:href="@{/element-ui/lib/theme-chalk/index.css}">
</head>

<body>
	<div id="app" v-cloak>
		<div class="login">
			<el-card>
				<div class="login-text">登陆</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
					<el-form-item label="用户名：" prop="username">
						<el-input v-model="ruleForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码：" prop="password">
						<el-input v-model="ruleForm.password"></el-input>
					</el-form-item>
					<el-form-item prop="rememberMe">
						<el-checkbox v-model="ruleForm.rememberMe">记住我</el-checkbox>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
				<el-alert v-if="param.error" th:title="${session.SPRING_SECURITY_LAST_EXCEPTION?.message}" type="error"
					center show-icon></el-alert>
				<el-alert v-if="param.logout" title="登出成功！" type="success" center show-icon></el-alert>
			</el-card>
		</div>
	</div>
</body>
<!-- vue -->
<script th:src="@{/vue/dist/vue.js}"></script>
<!-- element-ui -->
<script th:src="@{/element-ui/lib/index.js}"></script>
<!-- axios -->
<script th:src="@{/axios/dist/axios.js}"></script>
<script th:inline="javascript">
	new Vue({
		el: '#app',
		data: function () {
			return {
				param: /*[[${param}]]*/ {},
				ruleForm: {
					username: '',
					password: '',
					rememberMe: false
				},
				rules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ min: 3, message: '长度大于 3 个字符', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 3, message: '长度大于 3 个字符', trigger: 'blur' }
					]
				}
			}
		},
		created() {
			if (this.param.error) {
				this.ruleForm.username = /*[[${session.username}]]*/ '';
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios({
							method: 'post',
							url: '/login',
							data: 'username=' + this.ruleForm.username + '&password=' + this.ruleForm.password + '&remember-me=' + this.ruleForm.rememberMe
						}).then(function (response) {
							window.location.href = response.request.responseURL;
						}).catch(function (error) {
							console.log(error);
						});
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	})
</script>
<style>
	body {
		margin: 0px;
	}

	.login {
		width: 100%;
		height: calc(100vh);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-text {
		font-size: 30px;
		font-weight: bold;
		margin-bottom: 22px;
		text-align: center;
		color: #409EFF;
	}
</style>

</html>